<template>
  <div class="check-box">
    <!--checkbox原生样式  -->
    <input type="checkbox" v-on="listeners" v-bind="$attrs" :id="id" />
    <!--checkbox 美化样式,美化样式覆盖原生样式 -->
    <span></span>
    <label class="check-box-label ml-25 cursor" :for="id">
      <slot></slot>
    </label>
  </div>
</template>
<script>
import { random } from "@/libs/tools";
export default {
  name: "CheckBox",
  model: {
    prop: "checked",
    event: "change"
  },
  computed: {
    listeners() {
      return Object.assign({}, this.$listeners, {
        change: event => {
          this.$emit("change", event.target.checked);
        }
      });
    },
    id() {
      return `checkbox_${random()}`;
    }
  }
};
</script>
<style lang="stylus" scoped>
.check-box {
  display: inline-block
}
/* *::selection CSS伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。 */
.check-box .check-box-label::selection {
  background: rgba(0, 0, 0, 0)
}
.check-box input[type=checkbox] {
  width: 16px
  height: 16px
  position: absolute
  bottom: 0
  cursor: pointer
  opacity: 0 // 控制原生input是否显示
  z-index: 2 // 控制原生input覆盖在美化input上
  font-size: initial
}
.check-box span {
  position: absolute
  top: 0
  width: 16px
  height: 16px
  border: 1px solid #d6d6d6
  border-radius: 3px
  background: url('~@/assets/img/check-box.png') center no-repeat
  background-size: 14px
  background-position-x: 0px
  background-position-y: 20px
  transition: background-position-y 0.1s linear // 选中的动态效果
}
/* input 选中后的样式 */
.check-box input[type=checkbox]:checked + span {
  background-position-y: 0px
}
/* * 如何隐藏 Safari 中 input 标签的 autofill 图标,
Safari 浏览器会为 <input type="password"> 标签自动添加一个小锁的图标（如下图），
本意上是让用户可以从这里选择相应的 用户名/密码 进行自动填充 */
input::-webkit-credentials-auto-fill-button {
  display: none !important
  visibility: hidden
  pointer-events: none
  position: absolute /* 避免占用 input 元素额外的 padding，正常情况下存在 display: none!; 就可以了 */
  right: 0
}
</style>